<template>
  <div class="guard-manage-page">
    <div class="page-title">护导管理</div>
    <el-tabs v-model="activeTab" @tab-click="onTabClick" class="guard-tabs">
      <el-tab-pane label="护导点" name="point">
        <GuardPoint v-if="activeTab === 'point'" />
      </el-tab-pane>
      <el-tab-pane label="护导排班" name="schedule">
        <GuardSchedule v-if="activeTab === 'schedule'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import GuardPoint from './GuardPoint.vue'
import GuardSchedule from './GuardSchedule.vue'

const router = useRouter()
const route = useRoute()
const activeTab = ref(route.name === 'GuardSchedule' ? 'schedule' : 'point')

// 自动跳转到point子页面
onMounted(() => {
  if (route.path === '/main/guard') {
    router.replace('/main/guard/point')
  }
})

// 路由变化时同步Tab
watch(
  () => route.name,
  (name) => {
    if (name === 'GuardPoint') activeTab.value = 'point'
    if (name === 'GuardSchedule') activeTab.value = 'schedule'
  }
)

function onTabClick(tab) {
  if (tab.name === 'point') {
    router.push('/main/guard/point')
  } else {
    router.push('/main/guard/schedule')
  }
}
</script>

<style scoped>
.guard-manage-page {
  background: #f5f6fa;
  min-height: 100vh;
  padding: 24px;
}
.page-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
}
.guard-tabs {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
}
</style> 